<template>
  <div class="supplyDemand">
    <div class="tabs">
      <div class="tab" :class="{ on: activeName == 1 }" @click="checkNav(1)">
        奶山羊供应
        <span v-if="activeName == 1"></span>
      </div>
      <div class="tab" :class="{ on: activeName == 2 }" @click="checkNav(2)">
        奶山羊求购
        <span v-if="activeName == 2"></span>
      </div>
    </div>
    <div class="h50"></div>
    <div class="pl" v-if="activeName == 1">
      <div class="type_tabs">
        <div class="type_tab" @click="check1">
          <span>品种</span>
          <img v-if="!showCheck1" src="@/assets/img/xia_w.png" alt="" />
          <img v-else src="@/assets/img/shang.png" alt="" />
        </div>
        <div class="type_tab" @click="check2">
          <span>等级</span>
          <img v-if="!showCheck2" src="@/assets/img/xia_w.png" alt="" />
          <img v-else src="@/assets/img/shang.png" alt="" />
        </div>
        <div class="type_tab pri" @click="checkPrice">
          <span>价格</span>
          <img v-if="showPrice === ''" src="@/assets/img/sx.png" alt="" />
          <img v-if="showPrice === 1" src="@/assets/img/sx_s.png" alt="" />
          <img v-if="showPrice === 2" src="@/assets/img/sx_x.png" alt="" />
        </div>
      </div>
      <div class="pa">
        <div class="plist" v-if="showCheck1">
          <div
            class="p_item"
            :class="{ on: params.breed === item.id }"
            v-for="(item, index) in varietiesList"
            @click="handleVarieties(item)"
            :key="index"
          >
            {{ item.name }}
            <img v-if="params.breed === item.id" src="@/assets/img/dui.png" alt="" />
          </div>
        </div>
        <div class="plist" v-if="showCheck2">
          <div
            class="p_item"
            :class="{ on: checkLevel === item.value }"
            v-for="(item, index) in levelList"
            @click="handleLevel(item)"
            :key="index"
          >
            {{ item.text }}
            <img v-if="checkLevel === item.value" src="@/assets/img/dui.png" alt="" />
          </div>
        </div>
        <div class="pbtns" v-if="showCheck1 || showCheck2">
          <div @click="handleReset">重置</div>
          <div @click="handleSave">确定</div>
        </div>
      </div>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <template v-if="activeName == 1">
        <van-list
          v-model="loading"
          :immediate-check="false"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadList"
        >
          <template v-if="list.length > 0">
            <div class="items">
              <div class="item" v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
                <img :src="item.singleImg | imgPaths" alt="" />
                <div class="content">
                  <div class="title titlestyle">{{ item.content }}</div>
                  <div class="price">
                    <span>¥{{ item.price }}</span>
                    元/只
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div v-else align="center">
            <img src="@/assets/img/zanwu.png" style="width: 200px; margin-top: 136px" alt="" />
          </div>
        </van-list>
      </template>
      <template v-if="activeName == 2">
        <van-list
          v-model="loading2"
          :immediate-check="false"
          :finished="finished2"
          finished-text="没有更多了"
          @load="loadList2"
        >
          <template v-if="list2.length > 0">
            <div class="listbox2" v-for="(item, index) in list2" :key="index">
              <div class="item2s">
                <div class="item2_content">
                  <div class="fz15 c3 mb10 titlestyle">{{ item.content }}</div>
                  <div class="df mb10 fz13 c6 w2">
                    <div>品种：{{ item.breedName }}</div>
                    <div v-if="item.sex == 0">性别：公</div>
                    <div v-else>性别：母</div>
                  </div>
                  <div class="df mb10 fz13 c6 w2">
                    <!-- <div>性别：{{item.}}</div> -->
                    <div>数量（只）：{{ item.number }}</div>
                  </div>
                  <!-- <div class="c6 mb10 fz13">联系人：{{ item.contacts }}</div> -->
                  <div class="c6 mb10 fz13">
                    地点：{{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}{{ item.address }}
                  </div>
                  <div class="c6 mb10 fz13">求购时间：{{ item.startDate }} 至 {{ item.endDate }}</div>
                </div>
                <div class="tel df jcsb">
                  <div class="tel_l df">
                    <img src="@/assets/img/a11.png" alt="" />
                    <span class="fz13 c6">{{ item.contacts }}</span>
                  </div>
                  <a class="tel_r" @click="goCallPhone(item)">打电话</a>
                  <!-- <div class="tel_r">打电话</div> -->
                </div>
              </div>
            </div>
          </template>
          <div v-else align="center">
            <img src="@/assets/img/zanwu.png" style="width: 200px; margin-top: 136px" alt="" />
          </div>
        </van-list>
      </template>
    </van-pull-refresh>

    <van-overlay :show="showCheck1" />
    <van-overlay :show="showCheck2" />
  </div>
</template>

<script>
import { getValue, setValue } from '@/utils/auth'
import { postHandle } from '@/api'

import { PullRefresh, List, Overlay, Toast } from 'vant'
import { breedList, sheepSupplyList } from '@/api/supply'
export default {
  name: 'SupplyDemand',
  components: {
    [PullRefresh.name]: PullRefresh,
    [Overlay.name]: Overlay,
    [Toast.name]: Toast,
    [List.name]: List
  },
  data() {
    return {
      qiugouzvsible: true,
      activeName: getValue('typeState') ? getValue('typeState') : 1,

      refreshing: false,
      loading: false,
      finished: false,
      loading2: false,
      finished2: false,
      params: {
        page: 1,
        type: 0,
        perPage: 10,
        releaseState: 0,
        shield: 0,
        queryDataType: 1,
        breed: '',
        grade: '',
        orderDir: '',
        orderBy: 'price'
      },
      params2: {
        type: 1,
        page: 1,
        perPage: 10,
        releaseState: 0,
        shield: 0,
        queryDataType: 1
      },
      list: [],
      list2: [],
      showPrice: '',
      showCheck1: false,
      showCheck2: false,
      varietiesList: [],
      levelList: [],
      checkLevel: '',
      varieties: ''
    }
  },
  created() {},
  mounted() {
    this.loadZidian()
    this.params.page = 1
    this.list = []
    if (this.activeName == 1) {
      this.loadList()
    } else {
      this.loadList2()
    }
  },
  methods: {
    loadList() {
      sheepSupplyList(this.params).then(res => {
        if (res.status === 0) {
          const datas = res.data.rows
          this.list = this.list.concat(datas)
          this.loading = false
          this.refreshing = false
          let zFlag = this.list.length < res.data.count
          if (zFlag) {
            this.params.page += 1
          } else {
            this.finished = true
          }
        }
      })
    },
    loadList2() {
      sheepSupplyList(this.params2).then(res => {
        if (res.status === 0) {
          const datas = res.data.rows
          this.list2 = this.list2.concat(datas)
          this.loading2 = false
          this.refreshing = false
          let yFlag = this.list2.length < res.data.count
          if (yFlag) {
            this.params2.page++
          } else {
            this.finished2 = true
          }
        }
      })
    },
    loadZidian() {
      breedList({ pCode: 'T000010_MILKGOATVARIETY' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.varietiesList = datas.map(item => {
            return {
              id: item.value,
              name: item.label
            }
          })
        }
      })

      breedList({ pCode: 'T000010_LEVEL_DATA' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.levelList = datas.map(item => {
            return {
              text: item.label,
              value: item.value
            }
          })
        }
      })
    },
    goToDetail(item) {
      //  alert(item.id)
      setValue('shopInfo-view-id', item.id)
      setValue('shopInfo-view-content', item.content)

      this.$bridge.call('shopInfo')
    },
    // 下拉
    onRefresh() {
      this.params.page = 1
      this.params2.page = 1
      if (this.activeName == 1) {
        this.list = []
        this.finished = false
        this.loading = true
        this.loadList()
      } else if (this.activeName == 2) {
        this.list2 = []
        this.finished2 = false
        this.loading2 = true
        this.loadList2()
      }
    },
    checkNav(v) {
      this.showCheck1= false
      this.showCheck2= false
      this.params.breed=''
      this.params.grade=''
      this.checkLevel = ''
      // this.params.page = 1
      // this.params2.page = 1
      this.activeName = v
      if (v === 1) {
        this.qiugouzvsible = true
        // this.list = []
        // this.loadList()
      } else if (v === 2) {
        this.qiugouzvsible = false
        // this.list2 = []
        // this.loadList2()
      }
      this.onRefresh()
    },

    goCallPhone(item) {
      // alert(item.telephone)
      this.call(item.id, item.telephone)
    },

    call(id, telephone) {
      postHandle(`/agri/api/yzbzh/contactHistory/save`, {
        sheepInfoId: id,
        loginUserId: getValue('loginUserId')
      }).then(res => {
        if (res.status === 0) {
          this.$bridge.call('goCallPhone', telephone)
        }
      })
    },

    handleSave() {
      this.showCheck1 = false
      this.showCheck2 = false
      this.params.page = 1
      this.params2.page = 1
      this.onRefresh()
      // if (this.activeName == 1) {
      //   this.list = []
      //   this.loadList()

      // } else if (this.activeName == 2) {
      //   this.list2 = []
      //   this.loadList2()

      // }
    },
    // 选择价格
    checkPrice() {
      this.params.page = 1
      this.params2.page = 1
      this.list = []
      if (this.showCheck1 || this.showCheck2) {
        return
      }
      if (this.showPrice === '') {
        this.showPrice = 1

        this.params.orderDir = 'asc'
        this.loadList()
        // this.list = []
      } else {
        this.showPrice === 1 ? (this.showPrice = 2) : (this.showPrice = 1)

        if (this.showPrice === 1) {
          this.params.orderDir = 'asc'
          this.loadList()
          // this.list = []
        } else {
          this.params.orderDir = 'desc'
          this.loadList()
          // this.list = []
        }
      }
    },
    // 选择品种
    handleVarieties({ id }) {
      this.params.breed = id
    },
    //选择等级
    handleLevel({ value }) {
      this.params.grade = value

      this.checkLevel = value
    },
    // 打开品种
    check1() {
      if (this.showCheck2) {
        return
      }
      this.showCheck1 = !this.showCheck1
    },
    // 打开等级
    check2() {
      if (this.showCheck1) {
        return
      }
      this.showCheck2 = !this.showCheck2
    },
    // 重置
    handleReset() {
      this.params.page = 1
      this.list = []
      if (this.showCheck1) {
        this.showCheck1 = false

        this.params.breed = ''
      }

      if (this.showCheck2) {
        this.showCheck2 = false
        this.params.grade = ''
        this.checkLevel = ''
      }
      this.loadList()
    }
  }
}
</script>
<style lang='scss' scoped>
.listbox2 {
  padding: 11px 15px;
}
.titlestyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl {
  position: relative;
  z-index: 8888;
}
.item2s {
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 12px 0;
  margin-bottom: 10px;
  .item2_content {
    padding: 0 15px;
    border-bottom: 1px solid #eeeeee;
  }
}
.pa {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  .pbtns {
    display: flex;
    div {
      width: 50%;
      height: 44px;
      text-align: center;
      font-size: 15px;
      color: #999999;
      background-color: #f7f7f7;
      line-height: 44px;
    }
    div:last-child {
      background-color: #37b5b5;
      color: #ffffff;
    }
  }
  .plist {
    background-color: #fff;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    .p_item {
      width: 50%;
      padding: 0 20px;
      font-size: 14px;
      color: #999999;
      margin-bottom: 15px;
      img {
        width: 14px;
        height: 14px;
        margin-left: 20px;
      }
    }
    .p_item.on {
      color: #37b5b5;
    }
  }
}
.type_tabs {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 50px;
  border-bottom: 1px solid #eeeeee;
  .type_tab {
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 14px;
      color: #666666;
    }
    span.on {
      color: #333333;
    }
    img {
      width: 8px;
      height: 8px;
      margin-left: 6px;
    }
  }
}
.pri {
  img {
    width: 8px !important;
    height: 16px !important;
  }
}
.item2 {
}
.fz15 {
  font-size: 15px;
}
.c3 {
  color: #333333;
}
.fz13 {
  font-size: 13px;
}
.c6 {
  color: #666666;
}
.df {
  display: flex;
  align-items: center;
}
.mb10 {
  margin-bottom: 10px;
}
.jcsb {
  justify-content: space-between;
}
.tel {
  padding: 0 15px;
  padding-top: 11px;
  .tel_l {
    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }
  }
  .tel_r {
    padding: 2px 9px;
    background-color: #37b5b5;
    color: #ffffff;
    font-size: 13px;
  }
}
.w2 {
  div {
    width: 50%;
  }
}
.items {
  padding: 11px 15px;
  z-index: 1;
  overflow: hidden;
  .item {
    width: 167px;
    border-radius: 10px;
    margin-right: 11px;
    margin-bottom: 10px;
    float: left;
    img {
      width: 100%;
      height: 130px;
      border-radius: 10px 10px 0 0;
    }
    .content {
      padding: 10px;
      background-color: #fff;
      border-radius: 0 0 10px 10px;
      .title {
        font-size: 13px;
        color: #333333;
        margin-bottom: 10px;
      }
      .price {
        color: #ff4141;
        font-size: 10px;
        span {
          font-size: 16px;
        }
      }
    }
  }
  .item:nth-child(2n) {
    margin-right: 0;
  }
}
.h50 {
  height: 50px;
}
.tabs {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eeeeee;
  z-index: 8888;
  position: fixed;
  left: 0;
  top: 0;
  .tab {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    position: relative;
    font-size: 15px;
    color: #999999;
    span {
      width: 40px;
      height: 3px;
      background-color: #37b5b5;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }
  }
  .tab.on {
    color: #333333;
  }
}
</style>
